<template>
  <div class="flex-container">
    <div class="nav-bar">
      <van-nav-bar
        title="发布苗木"
        left-arrow
        @click-left="onClickLeft"
        fixed
        placeholder
        safe-area-inset-top
      ></van-nav-bar>
    </div>
    <div class="city-index-bar">
      <!-- 列表区域 -->
      <div class="list-container">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="true"
          @load="onLoad"
        >
          <van-cell
            v-if="list.length > 0"
            v-for="item in list"
            :title="item.nurseryName"
            :value="`${item.nurseryArea}亩`"
            :label="item.address"
            @click="selectMm(item)"
          />
          <img class="img" v-else src="../../assets/placeholder.png" />
        </van-list>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { nurseryList } from '@/api'

const loading = ref(false)
const finished = ref(false)
const list = ref([])

onMounted(async () => {
  getData()
})

const onClickLeft = () => {
  emit('update:show', false)
}

const onLoad = () => {
  getData()
}

// 获取苗木列表信息
const getData = async () => {
  loading.value = true
  try {
    let res = await nurseryList()
    if (res.code === 200) {
      list.value.push(...res.data)
      if (list.value.length >= res.data.length) {
        finished.value = true
      }
    }
  } finally {
    loading.value = false
  }
}

// 选择苗木
const selectMm = (item: any) => {
  emit('select', item)
  emit('update:show', false)
}

// 定义组件事件
const emit = defineEmits<{
  (e: 'select', value: any): void
  (e: 'update:show', value: false): void
}>()
</script>

<style lang="scss" scoped>
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:deep(.nav-bar) {
  .van-nav-bar__arrow {
    color: #222;
    font-size: 17px;
  }

  .van-nav-bar__title {
    font-size: 17px;
    font-weight: normal;
    color: #222;
  }
}

.city-index-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
  overflow: hidden;

  .list-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  :deep(.van-index-bar__sidebar) {
    right: 0;
  }

  :deep(.van-cell) {
    font-size: 13px;

    &:active {
      background-color: #f2f3f5;
    }
  }

  .van-cell {
    padding: 12px;
  }

  :deep(.van-cell__title) {
    line-height: 18px;
    color: #222;
    font-size: 14px;
  }

  :deep(.van-cell:after) {
    left: 0;
    right: 0;
  }

  .img {
    display: block;
    width: 100%;
  }
}
</style>
